<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="hugo-theme" content="Axiom 0.7.1">



  <link rel="icon" type="image/png" sizes="32x32" href="/blog/">
  <link rel="icon" type="image/x-icon" href="/blog/">
  <link rel="apple-touch-icon" href="/blog/">
  <link rel="canonical" href="https://Mia-zhao.gitee.io/blog/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%931/">
<link rel="preload" as="style" href="/blog/bundle.css?v=1603792187" media="all">
<link rel="stylesheet" href="/blog/bundle.css?v=1603792187" media="all">
<style>.cdata pre{color:#edf2f7;background-color:#2d3748}.cdata :not(pre)>code{color:#805ad5;background-color:#f7fafc}.chroma .err{color:#fed7d7;background-color:#9b2c2c}.chroma .hl{background-color:#4a5568}.chroma .ln{color:#a0aec0}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr{color:#63b3ed}.chroma .kt{color:#b794f4}.chroma .na{color:#f6e05e}.chroma .nb{color:#f6ad55}.chroma .nc{color:#fc8181}.chroma .no{color:#68d391}.chroma .nd{color:#fc8181}.chroma .ne{color:#fc8181}.chroma .nf{color:#f6ad55}.chroma .nt{color:#fc8181}.chroma .l{color:#b794f4}.chroma .dl,.chroma .ld,.chroma .s,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd{color:#68d391}.chroma .se{color:#a0aec0}.chroma .s1,.chroma .sh,.chroma .si,.chroma .sr,.chroma .ss,.chroma .sx{color:#68d391}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#b794f4}.chroma .o,.chroma .ow{color:#90cdf4}.chroma .p{color:#cbd5e0}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .cs{color:#a0aec0}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}</style>

<link rel="preload" as="image" href="/blog/images/Cover3.jpg">

<title>CSS 知识总结1 : Mia&#39;s Blog Posts</title>

<meta property="og:title" content="CSS 知识总结1">
<meta property="og:site_name" content="Mia&#39;s Blog Posts">
<meta property="og:url" content="https://Mia-zhao.gitee.io/blog/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%931/">
<link rel="image_src" href="https://Mia-zhao.gitee.io/blog/images/Cover3.jpg">
<meta property="og:image" content="https://Mia-zhao.gitee.io/blog/images/Cover3.jpg">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:type" content="article">
<meta property="og:locale" content="zh_Hans">
<meta property="og:description" content="这篇博文主要为了个人学习目的，内容包括CSS基础知识，重要概念（文档流normal flow和盒模型box model）以及布局 (float, flex, grid) 。 1 基础知识 CSS由Håkon Wium Lie 发明，CCS2.1是目前使用最广泛的版本，CSS3开始分模块更新版本。caniuse.com可以用来参考不同浏览器对CSS特性的支持。 1.1 语法 选择器 { 属性名: 属性值; /注释/ }， 举例： img {max-width: 100%;} @语法 @charset &amp;quot;UTF-8&amp;quot;;@import url(example.css);@media (min-width: 100px) and (max-width: 200px) {}1.2 资料 MDN CCS tricks 张鑫旭的博客 2 重要概念 2.1 文档流 normal flow 在默认布局下，文档流可以是左到右或是上到下。例如，span元素是默认合并的(inline), div元素是默认占一行不合并的(block): 除此以外，inline元素不能指定width/height, 元素的高度由line-height间接确定。block元素可以指定width/height,元素高度由内部文档流元素决定。 注：文档流元素是指处于文档流的元素，position: [absolute|fixed] 以及 float会使元素脱离文档流。 除了inline和block, 还可以通过display: inline-block;设置元素为inline-block。inline-block兼顾inline和block两者的特点，宽度流动与inline一致，高度流动与block一致，可以通过width/height设置宽高。 注意： block默认width的值是auto而非100% 不要用设置width为100% inline元素不能包含block元素 2.">
<meta name="description" content="这篇博文主要为了个人学习目的，内容包括CSS基础知识，重要概念（文档流normal flow和盒模型box model）以及布局 (float, flex, grid) 。 1 基础知识 CSS由Håkon Wium Lie 发明，CCS2.1是目前使用最广泛的版本，CSS3开始分模块更新版本。caniuse.com可以用来参考不同浏览器对CSS特性的支持。 1.1 语法 选择器 { 属性名: 属性值; /注释/ }， 举例： img {max-width: 100%;} @语法 @charset &amp;quot;UTF-8&amp;quot;;@import url(example.css);@media (min-width: 100px) and (max-width: 200px) {}1.2 资料 MDN CCS tricks 张鑫旭的博客 2 重要概念 2.1 文档流 normal flow 在默认布局下，文档流可以是左到右或是上到下。例如，span元素是默认合并的(inline), div元素是默认占一行不合并的(block): 除此以外，inline元素不能指定width/height, 元素的高度由line-height间接确定。block元素可以指定width/height,元素高度由内部文档流元素决定。 注：文档流元素是指处于文档流的元素，position: [absolute|fixed] 以及 float会使元素脱离文档流。 除了inline和block, 还可以通过display: inline-block;设置元素为inline-block。inline-block兼顾inline和block两者的特点，宽度流动与inline一致，高度流动与block一致，可以通过width/height设置宽高。 注意： block默认width的值是auto而非100% 不要用设置width为100% inline元素不能包含block元素 2.">
<meta property="og:updated_time" content="2020-08-06T07:50:00Z">
<meta property="fb:app_id" content="">
<meta name="author" content="Mia Zhao">
<meta property="article:author" content="https://mia-zhao.gitee.io/">
<meta property="article:published_time" content="2020-08-06T07:40:00Z">
<meta property="article:modified_time" content="2020-08-06T07:50:00Z">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS 知识总结1",
  "alternativeHeadline": "这篇博文主要为了个人学习目的，内容包括CSS基础知识，重要概念（文档流normal flow和盒模型box model）以及布局 (float, flex, grid) 。 1 基础知识 CSS由Håkon Wium Lie 发明，CCS2.1是目前使用最广泛的版本，CSS3开始分模块更新版本。caniuse.com可以用来参考不同浏览器对CSS特性的支持。 1.1 语法 选择器 { 属性名: 属性值; /注释/ }， 举例： img {\rmax-width: 100%;\r} @语法 @charset \u0026quot;UTF-8\u0026quot;;\r@import url(example.css);\r@media (min-width: 100px) and (max-width: 200px) {}\r1.2 资料 MDN CCS tricks 张鑫旭的博客 2 重要概念 2.1 文档流 normal flow 在默认布局下，文档流可以是左到右或是上到下。例如，span元素是默认合并的(inline), div元素是默认占一行不合并的(block): 除此以外，inline元素不能指定width/height, 元素的高度由line-height间接确定。block元素可以指定width/height,元素高度由内部文档流元素决定。 注：文档流元素是指处于文档流的元素，position: [absolute|fixed] 以及 float会使元素脱离文档流。 除了inline和block, 还可以通过display: inline-block;设置元素为inline-block。inline-block兼顾inline和block两者的特点，宽度流动与inline一致，高度流动与block一致，可以通过width/height设置宽高。 注意： block默认width的值是auto而非100% 不要用设置width为100% inline元素不能包含block元素 2.",
  "url": "https://Mia-zhao.gitee.io/blog/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%931/",
  "image": "https://Mia-zhao.gitee.io/blog/images/Cover3.jpg",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://Mia-zhao.gitee.io/blog/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%931/"
  },
  "description": "这篇博文主要为了个人学习目的，内容包括CSS基础知识，重要概念（文档流normal flow和盒模型box model）以及布局 (float, flex, grid) 。 1 基础知识 CSS由Håkon Wium Lie 发明，CCS2.1是目前使用最广泛的版本，CSS3开始分模块更新版本。caniuse.com可以用来参考不同浏览器对CSS特性的支持。 1.1 语法 选择器 { 属性名: 属性值; /注释/ }， 举例： img {\rmax-width: 100%;\r} @语法 @charset \u0026quot;UTF-8\u0026quot;;\r@import url(example.css);\r@media (min-width: 100px) and (max-width: 200px) {}\r1.2 资料 MDN CCS tricks 张鑫旭的博客 2 重要概念 2.1 文档流 normal flow 在默认布局下，文档流可以是左到右或是上到下。例如，span元素是默认合并的(inline), div元素是默认占一行不合并的(block): 除此以外，inline元素不能指定width/height, 元素的高度由line-height间接确定。block元素可以指定width/height,元素高度由内部文档流元素决定。 注：文档流元素是指处于文档流的元素，position: [absolute|fixed] 以及 float会使元素脱离文档流。 除了inline和block, 还可以通过display: inline-block;设置元素为inline-block。inline-block兼顾inline和block两者的特点，宽度流动与inline一致，高度流动与block一致，可以通过width/height设置宽高。 注意： block默认width的值是auto而非100% 不要用设置width为100% inline元素不能包含block元素 2.",
  "author": {
    "@type": "Person",
    "name": "Mia Zhao"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mia's Blog Posts",
    "logo": {
      "@type": "ImageObject",
      "url": "https://Mia-zhao.gitee.io/blog/"
    }
  },
  "datePublished": "2020-08-06T07:40:00Z",
  "dateModified": "2020-08-06T07:50:00Z",
  "articleBody": "\u003cp\u003e这篇博文主要为了个人学习目的，内容包括CSS基础知识，重要概念（文档流normal flow和盒模型box model）以及布局 (float, flex, grid) 。\u003c/p\u003e\n\u003ch2 id=\"1-基础知识\"\u003e1 基础知识\u003c/h2\u003e\n\u003cp\u003eCSS由\u003ca href=\"https://en.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie\"\u003eHåkon Wium Lie\u003c/a\u003e 发明，CCS2.1是目前使用最广泛的版本，CSS3开始分模块更新版本。\u003ca href=\"https://caniuse.com/\"\u003ecaniuse.com\u003c/a\u003e可以用来参考不同浏览器对CSS特性的支持。\u003c/p\u003e\n\u003ch3 id=\"11-语法\"\u003e1.1 语法\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e选择器 { 属性名: 属性值; /*注释*/ }， 举例：\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre\u003e\u003ccode\u003eimg {\r\n    max-width: 100%;\r\n}   \r\n\u003c/code\u003e\u003c/pre\u003e\u003col start=\"2\"\u003e\n\u003cli\u003e@语法\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre\u003e\u003ccode\u003e@charset \u0026quot;UTF-8\u0026quot;;\r\n@import url(example.css);\r\n@media (min-width: 100px) and (max-width: 200px) {}\r\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"12-资料\"\u003e1.2 资料\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eMDN\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://css-tricks.com/\"\u003eCCS tricks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.zhangxinxu.com/wordpress/category/css/\"\u003e张鑫旭的博客\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"2-重要概念\"\u003e2 重要概念\u003c/h2\u003e\n\u003ch3 id=\"21-文档流-normal-flow\"\u003e2.1 文档流 normal flow\u003c/h3\u003e\n\u003cp\u003e在默认布局下，文档流可以是左到右或是上到下。例如，\u003ccode\u003espan\u003c/code\u003e元素是默认合并的(\u003ccode\u003einline\u003c/code\u003e), \u003ccode\u003ediv\u003c/code\u003e元素是默认占一行不合并的(\u003ccode\u003eblock\u003c/code\u003e):\n\u003cimg src=\"/blog/images/NormalFlow.png\" alt=\"Image of Normal Flow\"\u003e\n除此以外，\u003ccode\u003einline\u003c/code\u003e元素不能指定\u003ccode\u003ewidth\u003c/code\u003e/\u003ccode\u003eheight\u003c/code\u003e, 元素的高度由\u003ccode\u003eline-height\u003c/code\u003e间接确定。\u003ccode\u003eblock\u003c/code\u003e元素可以指定\u003ccode\u003ewidth\u003c/code\u003e/\u003ccode\u003eheight\u003c/code\u003e,元素高度由内部\u003cem\u003e文档流元素\u003c/em\u003e决定。\u003cbr\u003e\n\u003cbr\u003e\n\u003cem\u003e注：文档流元素是指处于文档流的元素，\u003ccode\u003eposition: [absolute|fixed]\u003c/code\u003e 以及 \u003ccode\u003efloat\u003c/code\u003e会使元素脱离文档流。\u003c/em\u003e\u003cbr\u003e\n\u003cbr\u003e\n除了\u003ccode\u003einline\u003c/code\u003e和\u003ccode\u003eblock\u003c/code\u003e, 还可以通过\u003ccode\u003edisplay: inline-block;\u003c/code\u003e设置元素为\u003ccode\u003einline-block\u003c/code\u003e。\u003ccode\u003einline-block\u003c/code\u003e兼顾\u003ccode\u003einline\u003c/code\u003e和\u003ccode\u003eblock\u003c/code\u003e两者的特点，宽度流动与\u003ccode\u003einline\u003c/code\u003e一致，高度流动与\u003ccode\u003eblock\u003c/code\u003e一致，可以通过\u003ccode\u003ewidth\u003c/code\u003e/\u003ccode\u003eheight\u003c/code\u003e设置宽高。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e注意\u003c/strong\u003e：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003eblock\u003c/code\u003e默认\u003ccode\u003ewidth\u003c/code\u003e的值是\u003ccode\u003eauto\u003c/code\u003e而非\u003ccode\u003e100%\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e不要用设置\u003ccode\u003ewidth\u003c/code\u003e为\u003ccode\u003e100%\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003einline\u003c/code\u003e元素不能包含\u003ccode\u003eblock\u003c/code\u003e元素\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"22-盒模型-box-model\"\u003e2.2 盒模型 box model\u003c/h3\u003e\n\u003cp\u003eCSS盒模型分为:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e内容盒模型(content box)\u003c/li\u003e\n\u003cli\u003e边框盒模型(border box)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e区别在于内容盒模型宽度高度设置只包含内容(content)，边框盒模型宽度高度设置包含内容(content), 内边距(padding), 边框(border)。\nCSS里盒模型用box-sizing设置，默认用的是内容盒模型，建议用\u003ccode\u003eborder-box\u003c/code\u003e。\u003cbr\u003e\n\u003ccode\u003ebox-sizing: content-box; /*内容盒模型*/\u003c/code\u003e\u003cbr\u003e\n\u003ccode\u003ebox-sizing: border-box; /*边框盒模型*/\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003e举例：\n\u003cimg src=\"/blog/images/BoxModel.png\" alt=\"Image of Box Model\"\u003e\u003c/p\u003e\n\u003cp\u003e注意margin合并的情况:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e只上下合并\u003c/li\u003e\n\u003cli\u003e发生在元素margin之间没有其他属性（如：border, padding）\n\u003cimg src=\"/blog/images/MarginCollapsing.png\" alt=\"Image of Margin Collapsing\"\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"3-布局\"\u003e3 布局\u003c/h2\u003e\n\u003cp\u003eCSS布局可以将页面分为上中下或左中右等结构，分为固定宽度布局，不固定宽度布局，响应式布局。布局通过float, flex, grid完成。\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e若要求兼容IE9 ——\u0026gt; 用float布局 \r\n       否则 | \r\n            ——\u0026gt; 若要求兼容最新浏览器 ——\u0026gt; 用grid布局 \r\n                              否则 | \r\n                                   ——\u0026gt; 用flex布局 \r\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"31-float布局\"\u003e3.1 float布局\u003c/h3\u003e\n\u003cp\u003e步骤：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e子元素加\u003ccode\u003efloat\u003c/code\u003e 和 \u003ccode\u003ewidth\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e父元素加\u003ccode\u003e.clearfix\u003c/code\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre\u003e\u003ccode\u003e.clearfix:after {\r\n  content: '';\r\n  display: block;\r\n  clear: both;\r\n}\r\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"32-flex布局\"\u003e3.2 flex布局\u003c/h3\u003e\n\u003cp\u003e可以通过\u003ca href=\"https://flexboxfroggy.com/\"\u003eflex 青蛙游戏\u003c/a\u003e熟悉flex属性用法。\u003c/p\u003e\n\u003cp\u003eflex设置分为container和items设置，container和items举例如下：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\u0026quot;menu\u0026quot;\u0026gt;\r\n  \u0026lt;div class=\u0026quot;logo\u0026quot;\u0026gt;\r\n  \u0026lt;/div\u0026gt;\r\n  \u0026lt;ul\u0026gt;\r\n    \u0026lt;li\u0026gt;menu 1\u0026lt;/li\u0026gt;\r\n    \u0026lt;li\u0026gt;menu 2\u0026lt;/li\u0026gt;\r\n    \u0026lt;li\u0026gt;menu 3\u0026lt;/li\u0026gt;\r\n  \u0026lt;/ul\u0026gt;\r\n\u0026lt;/div\u0026gt;\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e以上例子需要CCS reset:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\nul, ol {\r\n  list-style: none;\r\n}\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e常用container元素属性有：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003edisplay: [flex|inline-flex]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eflex-direction: [row|row-reverse|column|column-reverse]\u003c/code\u003e 定义主轴方向\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eflex-wrap: [nowrap|wrap|wrap-reverse]\u003c/code\u003e 改变折行\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ejustify-content: [flex-start|flex-end|center|space-between|space-around]\u003c/code\u003e 设置主轴对齐方式\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ealign-items: [flex-start|flex-end|center|stretch]\u003c/code\u003e 设置次轴对齐方式\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e常用items元素属性有：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eorder\u003c/code\u003e 元素按照\u003ccode\u003eorder\u003c/code\u003e值的大小进行排序\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eflex-grow\u003c/code\u003e 设置变宽系数\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eflex-shrink\u003c/code\u003e 设置变窄系数，0防止缩短\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eflex-basis\u003c/code\u003e 基准宽度，默认\u003ccode\u003eauto\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eflex: flex-grow flex-shrink flex-basis\u003c/code\u003e 属性缩写\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ealign-self\u003c/code\u003e 单独设置\u003ccode\u003ealign-items\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"33-grid布局\"\u003e3.3 grid布局\u003c/h3\u003e\n\u003cp\u003eflex是一维布局方式，grid是二维布局方式。可以通过\u003ca href=\"https://cssgridgarden.com\"\u003egrid 花园游戏\u003c/a\u003e熟悉grid用法。\u003cbr\u003e\n\u003cbr\u003e\ngrid也分为container和items, 与flex类似。通过\u003ccode\u003edisplay: [grid|inline-grid]\u003c/code\u003e设置container, container可以被划分：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.container {\r\n    grid-template-columns: 40px auto 40px;\r\n    grid-template-rows: 25% 100px auto; \r\n}\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e以上将container分为三列三行, 每一个item可以通过划分的结构设置范围：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.item1 {\r\n    grid-column-start: 1;\r\n    grid-column-end: 3;\r\n    grid-row-start: 1;\r\n    grid-row-end: 2;\r\n}\r\n\u003c/code\u003e\u003c/pre\u003e"
}
</script>

<link rel="preload" as="script" href="/blog/bundle.js?v=1603792187">


</head>
<body>

  <header id="nav" class="header">
  <div class="ax-l-i max-w-6xl">
    <div class="ax-logo">
      <a class="block" href="/blog/" title="Mia&#39;s Blog Posts"><span class="font-semibold text-raven-900">Mia's Blog Posts</span></a>
    </div>
    <div class="ax-user">
      <a class="p-2 w-8 h-8 block text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" target="_blank" rel="noopener nofollow" href="https://www.google.com/search?q=site:https://Mia-zhao.gitee.io/blog/" title="Search">
        <svg class="fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.67 12.804c0-5.6 4.544-10.134 10.133-10.134s10.134 4.544 10.134 10.134-4.544 10.133-10.134 10.133S2.67 18.393 2.67 12.804zm28.943 16.923l-8.868-8.868c4.287-5.3 3.68-13.012-1.378-17.57S8.564-1.066 3.75 3.75s-5.017 12.558-.46 17.618 12.28 5.665 17.57 1.378l8.868 8.868a1.33 1.33 0 0 0 2.231-.597c.123-.46-.008-.952-.345-1.29h0z"/></svg>

      </a>
      <a class="p-2 block text-base leading-none text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" href="/blog/posts/">
        Posts
      </a>
    </div>
  </div>

  
</header>

  <main>
<div class="default-single">
  <div class="ax-title ax-l-o">
    <div class="ax-l-i max-w-680">
      <h1 class="post-title font-content-title font-normal leading-tight tracking-default text-40">CSS 知识总结1</h1>

      <div class="ax-meta flex items-center mt-5">
        <div class="flex-grow min-w-0">
          <div class="flex items-center">
  <div class="flex-shrink-0">
    <img
    class="w-12 h-12 sm:w-14 sm:h-14 object-cover p-3px rounded-full border border-blue-300"
    src="/blog/images/author/default.webp"
    alt="Mia Zhao">
  </div>
  <div class="flex-shrink-0 ml-2 leading-tight font-content-sans">
    <a class="block text-sm text-raven-800 hover:text-raven-900 hover:underline focus:underline" target="_blank" rel="noopener nofollow" title="Mia Zhao" href="https://mia-zhao.gitee.io/">Mia Zhao</a>
    <time class="text-sm text-raven-500" datetime="2020-08-06T07:40:00Z">Aug 6, 2020 3:40PM</time>
  </div>
</div>

        </div>
        <div>
          <div class="flex items-center">
  <a class="flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=CSS%20%e7%9f%a5%e8%af%86%e6%80%bb%e7%bb%931%20by%20%40%25%21s%28%3cnil%3e%29%20https%3a%2f%2fMia-zhao.gitee.io%2fblog%2fcss-%25E7%259F%25A5%25E8%25AF%2586%25E6%2580%25BB%25E7%25BB%25931%2f"><svg class="w-6 h-6 fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M32 6.078c-1.2.522-2.458.868-3.78 1.036 1.36-.812 2.398-2.088 2.886-3.626a13.11 13.11 0 0 1-4.16 1.588C25.742 3.794 24.026 3 22.154 3a6.56 6.56 0 0 0-6.556 6.562c0 .52.044 1.02.152 1.496-5.454-.266-10.28-2.88-13.522-6.862-.566.982-.898 2.106-.898 3.316a6.57 6.57 0 0 0 2.914 5.452 6.48 6.48 0 0 1-2.964-.808v.072c0 3.188 2.274 5.836 5.256 6.446-.534.146-1.116.216-1.72.216-.42 0-.844-.024-1.242-.112.85 2.598 3.262 4.508 6.13 4.57a13.18 13.18 0 0 1-8.134 2.798c-.538 0-1.054-.024-1.57-.1C2.906 27.93 6.35 29 10.064 29c12.072 0 18.672-10 18.672-18.668 0-.3-.01-.57-.024-.848C30.014 8.56 31.108 7.406 32 6.078z"/></svg>
</a>
  <a class="ml-3 flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Facebook" href="https://www.facebook.com/dialog/share?app_id=&display=page&href=https%3a%2f%2fMia-zhao.gitee.io%2fblog%2fcss-%25E7%259F%25A5%25E8%25AF%2586%25E6%2580%25BB%25E7%25BB%25931%2f"><svg class="w-6 h-6 fill-current" viewBox="-7 -3.5 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M30.234 0H1.765C.8.001 0 .79 0 1.766v28.47C.001 31.2.79 32 1.766 32h15.328V19.625h-4.156V14.78h4.156v-3.564c0-4.134 2.523-6.384 6.21-6.384 1.766 0 3.284.13 3.726.2v4.32h-2.543c-2.006 0-2.394.953-2.394 2.352v3.085h4.797l-.625 4.844h-4.172V32h8.14C31.21 32 32 31.2 32 30.234V1.765C32 .8 31.21 0 30.234 0z"/></svg>
</a>
</div>

        </div>
      </div>
    </div>
  </div>
  <div class="ax-feature ax-l-o">
    <div class="ax-l-i max-w-5xl">

<figure>
<img
class="mb-2 mx-auto leading-none shadow-xl"
src="/blog/images/Cover3.jpg"
alt="CSS 知识总结1">
</figure>

    </div>
  </div><div class="ax-content ax-l-o">
    <div class="ax-l-i max-w-680">
      <article class="cdata">
<p>这篇博文主要为了个人学习目的，内容包括CSS基础知识，重要概念（文档流normal flow和盒模型box model）以及布局 (float, flex, grid) 。</p>
<h2 id="1-基础知识">1 基础知识</h2>
<p>CSS由<a href="https://en.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie">Håkon Wium Lie</a> 发明，CCS2.1是目前使用最广泛的版本，CSS3开始分模块更新版本。<a href="https://caniuse.com/">caniuse.com</a>可以用来参考不同浏览器对CSS特性的支持。</p>
<h3 id="11-语法">1.1 语法</h3>
<ol>
<li>选择器 { 属性名: 属性值; /*注释*/ }， 举例：</li>
</ol>
<pre><code>img {
    max-width: 100%;
}   
</code></pre><ol start="2">
<li>@语法</li>
</ol>
<pre><code>@charset &quot;UTF-8&quot;;
@import url(example.css);
@media (min-width: 100px) and (max-width: 200px) {}
</code></pre><h3 id="12-资料">1.2 资料</h3>
<ul>
<li>MDN</li>
<li><a href="https://css-tricks.com/">CCS tricks</a></li>
<li><a href="https://www.zhangxinxu.com/wordpress/category/css/">张鑫旭的博客</a></li>
</ul>
<h2 id="2-重要概念">2 重要概念</h2>
<h3 id="21-文档流-normal-flow">2.1 文档流 normal flow</h3>
<p>在默认布局下，文档流可以是左到右或是上到下。例如，<code>span</code>元素是默认合并的(<code>inline</code>), <code>div</code>元素是默认占一行不合并的(<code>block</code>):
<img src="/blog/images/NormalFlow.png" alt="Image of Normal Flow">
除此以外，<code>inline</code>元素不能指定<code>width</code>/<code>height</code>, 元素的高度由<code>line-height</code>间接确定。<code>block</code>元素可以指定<code>width</code>/<code>height</code>,元素高度由内部<em>文档流元素</em>决定。<br>
<br>
<em>注：文档流元素是指处于文档流的元素，<code>position: [absolute|fixed]</code> 以及 <code>float</code>会使元素脱离文档流。</em><br>
<br>
除了<code>inline</code>和<code>block</code>, 还可以通过<code>display: inline-block;</code>设置元素为<code>inline-block</code>。<code>inline-block</code>兼顾<code>inline</code>和<code>block</code>两者的特点，宽度流动与<code>inline</code>一致，高度流动与<code>block</code>一致，可以通过<code>width</code>/<code>height</code>设置宽高。</p>
<p><strong>注意</strong>：</p>
<ol>
<li><code>block</code>默认<code>width</code>的值是<code>auto</code>而非<code>100%</code></li>
<li>不要用设置<code>width</code>为<code>100%</code></li>
<li><code>inline</code>元素不能包含<code>block</code>元素</li>
</ol>
<h3 id="22-盒模型-box-model">2.2 盒模型 box model</h3>
<p>CSS盒模型分为:</p>
<ul>
<li>内容盒模型(content box)</li>
<li>边框盒模型(border box)</li>
</ul>
<p>区别在于内容盒模型宽度高度设置只包含内容(content)，边框盒模型宽度高度设置包含内容(content), 内边距(padding), 边框(border)。
CSS里盒模型用box-sizing设置，默认用的是内容盒模型，建议用<code>border-box</code>。<br>
<code>box-sizing: content-box; /*内容盒模型*/</code><br>
<code>box-sizing: border-box; /*边框盒模型*/</code></p>
<p>举例：
<img src="/blog/images/BoxModel.png" alt="Image of Box Model"></p>
<p>注意margin合并的情况:</p>
<ul>
<li>只上下合并</li>
<li>发生在元素margin之间没有其他属性（如：border, padding）
<img src="/blog/images/MarginCollapsing.png" alt="Image of Margin Collapsing"></li>
</ul>
<h2 id="3-布局">3 布局</h2>
<p>CSS布局可以将页面分为上中下或左中右等结构，分为固定宽度布局，不固定宽度布局，响应式布局。布局通过float, flex, grid完成。</p>
<pre><code>若要求兼容IE9 ——&gt; 用float布局 
       否则 | 
            ——&gt; 若要求兼容最新浏览器 ——&gt; 用grid布局 
                              否则 | 
                                   ——&gt; 用flex布局 
</code></pre><h3 id="31-float布局">3.1 float布局</h3>
<p>步骤：</p>
<ol>
<li>子元素加<code>float</code> 和 <code>width</code></li>
<li>父元素加<code>.clearfix</code></li>
</ol>
<pre><code>.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
</code></pre><h3 id="32-flex布局">3.2 flex布局</h3>
<p>可以通过<a href="https://flexboxfroggy.com/">flex 青蛙游戏</a>熟悉flex属性用法。</p>
<p>flex设置分为container和items设置，container和items举例如下：</p>
<pre><code>&lt;div class=&quot;menu&quot;&gt;
  &lt;div class=&quot;logo&quot;&gt;
  &lt;/div&gt;
  &lt;ul&gt;
    &lt;li&gt;menu 1&lt;/li&gt;
    &lt;li&gt;menu 2&lt;/li&gt;
    &lt;li&gt;menu 3&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre><p>以上例子需要CCS reset:</p>
<pre><code>* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, ol {
  list-style: none;
}
</code></pre><p>常用container元素属性有：</p>
<ul>
<li><code>display: [flex|inline-flex]</code></li>
<li><code>flex-direction: [row|row-reverse|column|column-reverse]</code> 定义主轴方向</li>
<li><code>flex-wrap: [nowrap|wrap|wrap-reverse]</code> 改变折行</li>
<li><code>justify-content: [flex-start|flex-end|center|space-between|space-around]</code> 设置主轴对齐方式</li>
<li><code>align-items: [flex-start|flex-end|center|stretch]</code> 设置次轴对齐方式</li>
</ul>
<p>常用items元素属性有：</p>
<ul>
<li><code>order</code> 元素按照<code>order</code>值的大小进行排序</li>
<li><code>flex-grow</code> 设置变宽系数</li>
<li><code>flex-shrink</code> 设置变窄系数，0防止缩短</li>
<li><code>flex-basis</code> 基准宽度，默认<code>auto</code></li>
<li><code>flex: flex-grow flex-shrink flex-basis</code> 属性缩写</li>
<li><code>align-self</code> 单独设置<code>align-items</code></li>
</ul>
<h3 id="33-grid布局">3.3 grid布局</h3>
<p>flex是一维布局方式，grid是二维布局方式。可以通过<a href="https://cssgridgarden.com">grid 花园游戏</a>熟悉grid用法。<br>
<br>
grid也分为container和items, 与flex类似。通过<code>display: [grid|inline-grid]</code>设置container, container可以被划分：</p>
<pre><code>.container {
    grid-template-columns: 40px auto 40px;
    grid-template-rows: 25% 100px auto; 
}
</code></pre><p>以上将container分为三列三行, 每一个item可以通过划分的结构设置范围：</p>
<pre><code>.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
</code></pre>
      </article>
      

      

    </div>
  </div>
</div>

  </main>
  <footer class="footer">
  <div class="ax-l-i max-w-6xl">
    <nav class="flex items-center justify-center">
      <a class="ml-3 first:ml-0 text-sm text-gray-600 hover:text-gray-800" href="/blog/posts/">Posts</a>
      <a class="ml-3 first:ml-0 text-sm text-gray-600 hover:text-gray-800" href="/blog/contact/">Contact</a>
    </nav>

    <div class="footer-copyright text-sm text-center text-gray-500 mt-4">
      &#169; -2020 Mia&#39;s Blog Posts
    </div>
    <div class="text-sm sm:text-xs text-center text-gray-500 mt-2">
      Powered by <a href="https://www.axiomtheme.com/?utm_source=theme-footer&utm_medium=website&utm_campaign=referral">Axiom</a>
    </div>
  </div>
</footer>

<script src="/blog/bundle.js?v=1603792187"></script>


</body>
</html>
